﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/manager/easyui/themes/icon.css">
    <script type="text/javascript" src="/manager/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/manager/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        //工具栏
        var toolbar = [{
            text: '修改',
            iconCls: 'icon-edit',
            handler: function () {
                $('#dd').dialog('open');
                let row = $("#booklist").datagrid("getSelected");
                console.log(row);
                $.ajax({
                    url: '/manager/user/findOne',
                    type: "post",
                    data: {
                        id: row.id,
                    },
                    success: function (rs) {
                        console.log("获取填充数据");
                        // console.log(rs.data);
                        $("#modify-interest").textbox("setValue", rs.data.interest);
                        $("#modify-name").textbox("setValue", rs.data.username);
                        $("#modify-email").textbox("setValue", rs.data.email);
                        $("#modify-phone").textbox("setValue", rs.data.phone);
                        $("#modify-id").val(rs.data.id);
                    }
                });

            }
        }, '-', {
            text: '启用',
            iconCls: 'icon-ok',
            handler: function () {
                // let rows = $("#tab").datagrid("getRows");
                // console.log(rows[index]);

                let row = $("#booklist").datagrid("getSelected");
                console.log(row);
                $.ajax({
                    url: '/manager/user/update',
                    type: "post",
                    data: {
                        id: row.id,
                        flag: 1,
                    },
                    success: function (data) {
                        console.log("修改完毕");
                        $('#booklist').datagrid("reload");
                    }
                });


            }
        }, '-', {
            text: '禁用',
            iconCls: 'icon-cancel',
            handler: function () {
                // alert('cancel')
                let row = $("#booklist").datagrid("getSelected");
                console.log(row);
                /*                $('#booklist').datagrid("reload", {
                                    id: row.id,
                                    flag: 0,
                                });*/
                $.ajax({
                    url: '/manager/user/update',
                    type: "post",
                    data: {
                        id: row.id,
                        flag: 0,
                    },
                    success: function (data) {
                        console.log("修改完毕");
                        $('#booklist').datagrid("reload");
                    }
                });
            }
        }];
        $(function () {
            $('#booklist').datagrid({
                title: '用户列表',
                iconCls: 'icon-save',
                method: "get",
                url: '/manager/user/findAll',
                columns: [
                    [
                        {field: 'username', title: '姓名', width: 100, align: 'center'},
                        {field: 'phone', title: '电话', width: 200, align: 'center'},
                        {field: 'email', title: 'eamil', width: 80, align: 'center'},
                        {
                            field: 'flag', title: '状态', width: 200, align: 'center',
                            formatter: (val, row, index) => {
                                return row.flag == "1" ? "启用" : "禁用";
                            }
                        }]
                ],
                toolbar: toolbar,
                pagination: true,//表示在datagrid设置分页
                singleSelect: true
            });

            //初始化查询栏
            $("#submit_search").linkbutton({iconCls: 'icon-search', plain: true})
                .click(function () {
                    // $('#dg').datagrid({queryParams: form2Json("searchform")});   //点击搜索
                    console.log("start search");
                    $('#booklist').datagrid("reload", {
                        username: $("#search-name").val(),
                        flag: $("#search_type").val()
                    });
                });

            //初始化修改窗口
            $('#dd').dialog({
                title: 'My Dialog',
                width: 700,
                height: 500,
                closed: true,
                cache: false,
                href: '',
                modal: true,
                iconCls: 'icon-save',
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        // alert('ok');
                        console.log("start modify");
                        $.ajax({
                            url: '/manager/user/modify',
                            type: "post",
                            data: $("#ff").serialize(),
                            success: function (data) {
                                console.log("修改完毕");
                                $('#booklist').datagrid("reload");
                            }
                        });

                    }
                }, {
                    text: '关闭',
                    handler: function () {
                        // alert('cancel');
                        $('#dd').dialog('close');
                    }
                }]
            });

        });
    </script>
</head>
<body>
<form name="searchform" method="post" action="" id="searchform">
    <td width="70" height="30"><strong>用户查询：</strong></td>
    <td height="30">
        <input type="text" name="username" id="search-name" size=20 placeholder="姓名"/>
        <select name="flag" id="search_type">
            <option value="-1">请选择状态</option>
            <option value="1">启用</option>
            <option value="0">禁用</option>
        </select>
    </td>
    <td>
        <a id="submit_search">搜索</a>
    </td>
</form>
<table id="booklist"></table>
<div id="dd">
    <div align="center" style="margin-top: 30px">
        <form id="ff" method="post">
            <input type="hidden" name="id" id="modify-id">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" id="modify-name" style="width:50%"
                       data-options="label:'姓名:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="phone" id="modify-phone" style="width:50%"
                       data-options="label:'电话:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="email" id="modify-email" style="width:50%"
                       data-options="label:'email:',required:true,validType:'email'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="interest" id="modify-interest" style="width:50%;height:60px"
                       data-options="label:'兴趣爱好:',multiline:true">
            </div>
        </form>
    </div>
</div>
</body>
</html>